<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/header.css" />
		<link rel="stylesheet" type="text/css" href="fonticon/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="css/navbar.css" />
		<script type="text/javascript" charset="utf-8">
			mui.init();

			mui.plusReady(function() {
				plus.navigator.setStatusBarStyle("light");
				plus.navigator.setStatusBarBackground("#FF6633");
			})
		</script>
	</head>
	<body>
		<!-- <header class="mui-bar mui-bar-nav title">
			<h1 class="mui-title title-color">雨信</h1>
		</header> -->
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active" tabIndex="0">
				<span class="mui-icon icon mui-icon-chatbubble"></span>
				<span class="mui-tab-label">聊天</span>
			</a>
			<a class="mui-tab-item" tabIndex="1">
				<span class="mui-icon icon iconfont">&#xe655;</span>
				<span class="mui-tab-label">通讯录</span>
			</a>
			<a class="mui-tab-item" tabIndex="2">
				<span class="mui-icon icon iconfont">&#xe64f;</span>
				<span class="mui-tab-label">发现</span>

			</a>
			<a class="mui-tab-item" tabIndex="3">
				<span class="mui-icon icon iconfont">&#xe67b;</span>
				<span class="mui-tab-label">我</span>
			</a>
		</nav>
	</body>
	<script src="js/app.js"></script>
	<script src="js/chat.js"></script>
	<script type="text/javascript">
		var showIndex = 0;

		var chat = new Chat().chat;

		var pages = [{
				id: 'chat.html',
				url: 'pages/chat/chat.html',
			},
			{
				id: 'friends.html',
				url: 'pages/friends/friends.html',
			},
			{
				id: 'discover.html',
				url: 'pages/discover/discover.html',
			},
			{
				id: 'me.html',
				url: 'pages/me/me.html',
			},
		];

		var pageStyle = {
			top: "0",
			bottom: "50px"
		};

		mui.plusReady(function() {
			// 禁止返回到登录注册页面
			mui.back = function() {
				return false;
			}

			// 获取当前Webview对象 
			var currentWebview = plus.webview.currentWebview();
			currentWebview.addEventListener("show", function() {
				chat.init(); // 初始化连接websocket
			});
			for (var i = 0; i < pages.length; i++) {
				var page = pages[i];
				var webview = plus.webview.create(page.url, page.id, pageStyle, {
					chat: chat
				});
				// 隐藏创建窗口
				webview.hide();
				// 追加到当前webview
				currentWebview.append(webview);
			}
			// 设置默认显示的页面
			plus.webview.show(pages[showIndex].id);

			// 绑定tab切换事件
			mui(".mui-bar-tab").on("tap", ".mui-tab-item", function() {
				var tabIndex = this.getAttribute("tabIndex");
				if (tabIndex == showIndex) {
					return;
				}
				// 隐藏当前页面
				plus.webview.hide(pages[showIndex].id, "fade-out", 200);
				// 显示选择页面
				showIndex = tabIndex;
				plus.webview.show(pages[showIndex].id, "fade-in", 200);
			});
			
			window.addEventListener("refresh", function(){
				console.log("进入主页面")
				// 隐藏当前页面
				plus.webview.hide(pages[showIndex].id, "fade-out", 200);
				// 显示选择页面
				showIndex = 0;
				plus.webview.show(pages[showIndex].id, "fade-in", 200);
			});
		});
		
		function showChatPage(tabIndex){
			if (tabIndex == showIndex) {
				return;
			}
			var aList = document.getElementsByTagName("a");
			for (var i = 0; i < aList.length; i++) {
				var a = aList[i];
				if(showIndex == i){
					a.classList.remove("mui-active");
				}
				if(tabIndex == i){
					a.classList.add("mui-active");
				}
			}
			// 隐藏当前页面
			plus.webview.hide(pages[showIndex].id, "fade-out", 200);
			// 显示选择页面
			showIndex = tabIndex;
			plus.webview.show(pages[showIndex].id, "fade-in", 200);
		}
		
	</script>
</html>
